<template>
  <div class="search">
    <f-form ref="form" :action="api.link" :form-key="this.formItem.linkId">
      <f-form-item label="名称" name="linkName" :required="true" :value="formItem.linkName"/>
      <f-form-item label="跳转地址" name="linkUrl" :value="formItem.linkUrl" :slotObj="linkSolt"/>
      <f-form-item label="Logo" type="upload" name="linkLogo" :value.sync="formItem.linkLogo" v-if="loaded" :file-max="1"/>
    </f-form>
  </div>
</template>

<script>
  export default {
    name: 'form',
    props: {},
    data () {
      return {
        isAdd: true,
        loaded: false,//是否加载轮播图组件
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem () {
        return {
          linkPrefix: ''
        }
      },
      setData (data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        this.isAdd = true
        if (data && data.linkId) {
          this.formItem = data
          this.isAdd = false
          this.loaded = true
        }else{
          this.loaded = true
        }
      },
      handleSubmit () {
        this.$refs.form.submit({ linkLogo: this.formItem.linkLogo })
      }
    },
    computed: {
      linkSolt: function () {
        return {
          name: 'linkPrefix',
          slotName: 'addonBefore',
          value: this.formItem.linkPrefix,
          width: 90,
          data: [{ label: 'http://', value: 'http://' }, { label: 'https://', value: 'https://' }]
        }
      }
    },
    created () {

    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
